﻿//载入基础页面
{extend name="common/base" /}

//页面单独CSS
{block name="CustomCSS"}
<link rel="stylesheet" href="__STATIC__/vendors/js/bootstrap-input/css/fileinput.min.css">
{/block}

//页面单独JS
{block name="CustomJS"}
<script src="__STATIC__/vendors/js/bootstrap-input/js/fileinput.min.js"></script>
<script src="__STATIC__/vendors/js/bootstrap-input/js/locales/zh.js"></script>
<script src="__STATIC__/vendors/js/validation/validation.min.js"></script>
<script src="__STATIC__/vendors/js/jquery.form/jquery.form.min.js"></script>
<script src="__STATIC__/vendors/js/noty/noty.min.js"></script>
<script src="__STATIC__/vendors/js/daterangepicker/moment.min.js"></script>
<script src="__STATIC__/vendors/js/daterangepicker/daterangepicker.js"></script>
<script type="text/javascript">

    //日期选择器载入
    $('#create_date').daterangepicker({
        singleDatePicker: true,
        locale: {
            format:'YYYY-MM-DD',
        }
    });

    //获取配置信息，如传入值，则赋值
    function getConfig(config){
        //组装URL
        var url = "{:url('Car/carConfigJson',['vehicle'=>''])}"+$("#vehicle").val();
        //使用replace方法把url里面的+号给替换掉
        url = url.replace(/\+/g, '%2B');
        //请求数据
        $.ajax({
            //请求方式
            type : "GET",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            //请求地址
            url : url,
            //请求成功
            success : function(config_data) {
                // var config_data = $.parseJSON(result);
                //删除市的原有option
                $('#config').empty();
                $('<option></option>').appendTo('#config');
                //添加option
                $.each(config_data, function(index,item) {
                    $('<option value="' + item + '">' + item + '</option>').appendTo('#config');
                });
                if(config){
                    $('#config').val(config);
                }
            },
            //请求失败，包含具体的错误信息
            error : function(e){
                console.log(e.status);
                console.log(e.responseText);
            }
        });
    }

    //获取配置信息
    function getInfo(){
        //组装URL
        var url = "{:url('Car/carInfoJson')}?vehicle="+$("#vehicle").val()+"&config="+$("#config").val();
        //使用replace方法把url里面的+号给替换掉
        url = url.replace(/\+/g, '%2B');
        //请求数据
        $.ajax({
            //请求方式
            type : "GET",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            //请求地址
            url : url,
            //请求成功
            success : function(info_data) {
                // var info_data = $.parseJSON(result);
                //删除市的原有option，给color赋值
                $('#color').empty();
                $('<option></option>').appendTo('#color');
                //添加option
                $.each(info_data.color, function(index,item) {
                    $('<option value="' + item + '">' + item + '</option>').appendTo('#color');
                });
                //删除市的原有option，给color赋值
                $('#trim').empty();
                $('<option></option>').appendTo('#trim');
                //添加option
                $.each(info_data.trim, function(index,item) {
                    $('<option value="' + item + '">' + item + '</option>').appendTo('#trim');
                });
                //price赋值
                $('#price').val(info_data.price);
                //model赋值
                $('#model').val(info_data.model);
            },
            //请求失败，包含具体的错误信息
            error : function(e){
                alert('数据有误，请联系管理员');
                console.log(e.status);
                console.log(e.responseText);
            }
        });
    }

    $(document).ready(function () {
        //single date
        $('#create_date').daterangepicker({
            singleDatePicker: true,
            autoUpdateInput: false,
            locale: {
                format:'YYYY-MM-DD',
            }
        },function(start,end) {
            this.autoUpdateInput = true//选完日期后打开自动赋值
        });

        $("#ajaxForm").ajaxForm({
            //定义返回JSON数据，还包括xml和script格式
            dataType: 'json',
            //在发送之前进行的操作，如果有问题，返回false即可不会进行提交
            beforeSend: function () {
                //定义 form为当前表格
                const form = $("#ajaxForm")

                //如果没有完成校验就返回false不提交
                if (form[0].checkValidity() === false){
                    return false;
                }
            },
            success: function (data) {
                //提交成功后调用
                new Noty({
                    type: "success",
                    layout: "topRight",
                    text: "成功添加一条数据，ID为" + data,
                    progressBar: true,
                    timeout: 2500,
                    animation: {
                        open: "animated bounceInRight",
                        close: "animated bounceOutRight"
                    },
                    callbacks: {
                        afterShow: function() {
                            $(location).attr('href', '{:url('Stock/undelivered')}');
                        },
                    }
                }).show();
                return false;
            },
            error: function(XmlHttpRequest, textStatus, errorThrown){  
                //提交成功后调用
                new Noty({
                    type: "error",
                    layout: "topRight",
                    text: "数据添加失败",
                    progressBar: true,
                    timeout: 2500,
                    animation: {
                        open: "animated bounceInRight",
                        close: "animated bounceOutRight"
                    }
                }).show();
                return false;
            } 
        });

        //初始化input
        $("#input").fileinput({
            uploadAsync: false,
            maxFileCount: 1,
            showPreview:true,
            language: 'zh',
            uploadUrl: '{:url('stock/fileUpload')}',
            required: true,
            showBrowse: true, 
            browseOnZoneClick: true,
            dropZoneEnabled: true,
            allowedFileExtensions: ["jpg","png"],//只能选择xls,和xlsx格式的文件提交
            //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
            /*不同文件图标配置*/
            previewFileIconSettings: { 
                 'docx': '<i class="la la-file-word-o text-primary" ></i>',
                 'xlsx': '<i class="la la-file-excel-o text-success"></i>',
                 'pptx': '<i class="la la-file-powerpoint-o text-danger"></i>',
                 'jpg': '<i class="la la-file-photo-o text-warning"></i>',
                 'pdf': '<i class="la la-file-pdf-o text-danger"></i>',
                 'zip': '<i class="la la-file-archive-o text-muted"></i>',
                 'doc': '<i class="la la-file-word-o text-primary"></i>',
                 'xls': '<i class="la la-file-excel-o text-success"></i>',
                 'ppt': '<i class="la la-file-powerpoint-o text-danger"></i>',
                 'pdf': '<i class="la la-file-pdf-o text-danger"></i>',
                 'zip': '<i class="la la-file-archive-o text-muted"></i>',
                 'htm': '<i class="la la-file-code-o text-info"></i>',
                 'txt': '<i class="la la-file-text-o text-info"></i>',
                 'mov': '<i class="la la-file-movie-o text-warning"></i>',
                 'mp3': '<i class="la la-file-audio-o text-warning"></i>',
                 'jpg': '<i class="la la-file-photo-o text-danger"></i>', 
                 'gif': '<i class="la la-file-photo-o text-muted"></i>', 
                 'png': '<i class="la la-file-photo-o text-primary"></i>'    
            },
            layoutTemplates:{ actionUpload:''},
            /*上传成功之后运行*/
            fileuploaded:$("#input").on('filebatchuploadsuccess', function (event, data) { 
                // var return_data = $.parseJSON(data.response);
                var return_data = data.response;
                if(return_data.result == true){
                    //提交成功后调用
                    new Noty({
                        type: "success",
                        layout: "topRight",
                        text: "上传成功",
                        progressBar: true,
                        timeout: 2500,
                        animation: {
                            open: "animated bounceInRight",
                            close: "animated bounceOutRight"
                        },
                        callbacks: {
                            afterShow: function() {
                                //file_id框赋值
                                $('#certificate_url').val(return_data.certificate_url);
                                $('#certificate').val(return_data.certificate.id);
                                //上传文件框清空重置
                                $('.file1').fileinput('clear').fileinput('refresh').fileinput('enable');
                                //关闭上传modal
                                $('#upload-modal').modal('hide');
                            },
                        }
                    }).show();
                }else{
                    //提交失败后调用
                    new Noty({
                        type: "error",
                        layout: "topRight",
                        text: "上传失败，失败原因是" + return_data.reason,
                        progressBar: true,
                        timeout: 2500,
                        animation: {
                            open: "animated bounceInRight",
                            close: "animated bounceOutRight"
                        },
                        callbacks: {
                            afterShow: function() {
                                // window.location.reload();
                            },
                        }
                    }).show();
                }
            }),

            /*上传出错误处理*/
            fileerror:$('#input').on('fileerror', function(event, data, msg) {
                console.log(msg);
                //提交失败后调用
                new Noty({
                    type: "error",
                    layout: "topRight",
                    text: "上传失败，失败原因是" + return_data.reason,
                    progressBar: true,
                    timeout: 2500,
                    animation: {
                        open: "animated bounceInRight",
                        close: "animated bounceOutRight"
                    },
                    callbacks: {
                        afterShow: function() {
                            // window.location.reload();
                        },
                    }
                }).show();
            }),
        });

        //如果车系有变化，拉取配置信息
        $("#vehicle").change(function(){
            getConfig();
            $('#color').empty();
            $('<option>请先选择配置</option>').appendTo('#color');
            $('#trim').empty();
            $('<option>请先选择配置</option>').appendTo('#trim');
        });

        //如果车系有变化，拉取配置信息
        $("#config").change(function(){
            getInfo();
        });
    });

 
</script>
{/block}

//页面显示名称
{block name="PageName"}
添加库存车辆信息
{/block}

//自定义Modal
{block name="Modal"}
<!-- 导入Modal开始 -->
<div id="upload-modal" class="modal fade">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">上传合格证</h4>
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                    <span class="sr-only">关闭</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col">
                        <label class="control-label"> 选择文件 </label>
                        <input id="input" type="file" class="file1" name="input">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-shadow" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<!-- 导入Modal结束 -->
{/block}

//主页面代码
{block name="main"}
<div class="row">
    <div class="col-xl-12">
        <div class="widget has-shadow">
            <div class="widget-header bordered no-actions d-flex align-items-center">
                <h2>添加库存车辆信息</h2>
            </div>
            <div class="widget-body">
                <form class="needs-validation" novalidate="" id="ajaxForm" action="{:url('Stock/save')}">
                    <div class="form-group row mb-5">
                        <label class="col-xl-3 form-control-label">入库时间</label>
                        <div class="col-xl-9">
                            <div class="input-group">
                                <span class="input-group-addon addon-primary">入库时间*</span>
                                <input type="text" class="form-control" placeholder="请输入入库时间" required="required" name="create_date" id="create_date">
                                <div class="invalid-feedback">
                                    请输入入库时间
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row  mb-5">
                        <label class="col-xl-3 form-control-label">车辆信息</label>
                        <div class="col-xl-9">
                             <div class="form-group row">
                                <div class="col">
                                    <div class="input-group">
                                        <span class="input-group-addon addon-primary">车系*</span>
                                        <select class="form-control" name="vehicle" id="vehicle" required="required">
                                            <option>请选择车系</option>
                                            {volist name="vehicleOption" id="vehicleOption"}
                                                <option value="{$vehicleOption}">{$vehicleOption}</option>
                                            {/volist}
                                        </select>
                                         <div class="invalid-feedback">
                                            请选择车系
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="input-group">
                                        <span class="input-group-addon addon-primary">配置*</span>
                                        <select class="form-control" name="config" id="config" required="required">
                                        </select>
                                        <div class="invalid-feedback">
                                            请选择配置
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col">
                                    <div class="input-group">
                                        <span class="input-group-addon addon-primary">颜色*</span>
                                        <select class="form-control" name="color" id="color" required="required">
                                        </select>
                                         <div class="invalid-feedback">
                                            请选择颜色
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="input-group">
                                        <span class="input-group-addon addon-primary">内饰*</span>
                                        <select class="form-control" name="trim" id="trim" required="required">
                                        </select>
                                        <div class="invalid-feedback">
                                            请选择内饰
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col">
                                    <div class="input-group">
                                        <span class="input-group-addon addon-primary">车价*</span>
                                        <input class="form-control" type="text" name="price" id="price" required="required">
                                        <div class="invalid-feedback">
                                            请填写车价
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="input-group">
                                        <span class="input-group-addon addon-primary">车型编码*</span>
                                        <input class="form-control" type="text" name="model" id="model" required="required" style="text-transform:uppercase;">
                                         <div class="invalid-feedback">
                                            请填写车型编码
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col">
                                    <div class="input-group">
                                        <span class="input-group-addon addon-primary">车架号*</span>
                                        <input class="form-control" type="text" name="vin" required="required" style="text-transform:uppercase;">
                                        <div class="invalid-feedback">
                                            请填写车架号
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="input-group">
                                        <span class="input-group-addon addon-primary">发动机号*</span>
                                        <input class="form-control" type="text" name="engine" required="required" style="text-transform:uppercase;">
                                         <div class="invalid-feedback">
                                            请填写发动机号
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col">
                                    <div class="input-group">
                                        <span class="input-group-addon addon-primary">选装</span>
                                        <input class="form-control" type="text" name="option">
                                        <div class="invalid-feedback">
                                            请填写选装配置
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="input-group">
                                        <span class="input-group-addon addon-primary">备注</span>
                                        <input class="form-control" type="text" name="note">
                                         <div class="invalid-feedback">
                                            请填写备注
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col">
                                    <div class="input-group">
                                        <span class="input-group-addon addon-primary">合格证</span>
                                        <input class="form-control" type="text" name="certificate_url" id="certificate_url" readonly="readonly">
                                        <input class="form-control" type="text" name="certificate" id="certificate" hidden="hidden">
                                        <span class="input-group-btn">
                                            <button type="button" class="btn btn-primary ripple" data-toggle="modal" data-target="#upload-modal">
                                                上传合格证
                                            </button>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row  mb-5">
                        <label class="col-xl-3 form-control-label">相关信息</label>
                        <div class="col-xl-9">
                            <div class="form-group row">
                                <div class="col">
                                    <div class="input-group">
                                        <span class="input-group-addon addon-primary">存放地点*</span>
                                        <input type="text" class="form-control" placeholder="请输入存放地点" required="required" name="location" list="locationList">
                                        <datalist id="locationList">
                                            {volist name="location" id="location"}
                                                <option value="{$location}">
                                            {/volist}
                                        </datalist>
                                        <div class="invalid-feedback">
                                            请输入存放地点
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="input-group">
                                        <span class="input-group-addon addon-primary">库位</span>
                                        <input type="text" class="form-control" placeholder="请输入库位" name="storehouse" list="storehouseList">
                                        <datalist id="storehouseList">
                                            {volist name="storehouse" id="storehouse"}
                                                <option value="{$storehouse}">
                                            {/volist}
                                        </datalist>
                                        <div class="invalid-feedback">
                                            请输入库位
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col">
                                    <div class="input-group">
                                        <span class="input-group-addon addon-primary">监管方*</span>
                                        <input type="text" class="form-control" placeholder="请输入监管方" required="required" name="regulator" list="regulatorList" >
                                        <datalist id="regulatorList">
                                            {volist name="regulator" id="regulator"}
                                                <option value="{$regulator}">
                                            {/volist}
                                        </datalist>
                                        <div class="invalid-feedback">
                                            请输入监管方
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="text-right">
                        <button class="btn btn-shadow" type="reset" onclick="history.go(-1);">取消</button>
                        <button class="btn btn-gradient-01" type="submit">提交</button>
                    </div>
                </form>
            </div>
        </div>
        <!-- End Export -->
    </div>
</div>
{/block}//主页面
